<template>
  <view class="homeLayout page-gradient-color">
    <custom-bar title="推荐"></custom-bar>
    <view class="banner">
      <swiper indicator-dots circular>
        <swiper-item v-for="item in bannerList" :key="item._id">
          <navigator
            v-if="item.target === 'miniProgram'"
            class="navigator"
            target="miniProgram"
            :app-id="item.appid"
            :url="item.url">
            <image class="image" :src="item.picurl" mode="aspectFill"></image>
          </navigator>
          <navigator
            v-else
            class="navigator"
            :url="`/pages/classlist/classlist?${item.url}`">
            <image class="image" :src="item.picurl" mode="aspectFill"></image>
          </navigator>
        </swiper-item>
      </swiper>
    </view>

    <view class="notice-container">
      <view class="notice">
        <view class="l">
          <uni-icons type="sound-filled" size="20"></uni-icons>
          <text class="title">公告</text>
        </view>
        <view class="body">
          <swiper vertical autoplay :interval="3000" :duration="1000" circular>
            <swiper-item v-for="item in noticeList" :key="item._id">
              <navigator :url="`/pages/notice/detail?id=${item._id}`">
                <view class="content">{{ item.title }}</view>
              </navigator>
            </swiper-item>
          </swiper>
        </view>
        <view class="r">
          <uni-icons type="right" size="16" color="#ededed"></uni-icons>
        </view>
      </view>
    </view>

    <view class="daily-recommand">
      <w-title>
        <template #name>每日推荐</template>
        <template #custom>
          <view class="date">
            <uni-icons type="calendar" size="18"></uni-icons>
            <view class="date-desc">
              <uni-dateformat :date="Date.now()" format="dd号"></uni-dateformat>
            </view>
          </view>
        </template>
      </w-title>
      <view class="body">
        <scroll-view scroll-x>
          <view
            class="box"
            v-for="item in recommandList"
            :key="item._id"
            :data-id="item._id"
            @click="toPreview(item)">
            <image :src="item.smallPicurl" mode="aspectFill"></image>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="special-topic">
      <w-title>
        <template #name>专题精选</template>
        <template #custom>
          <navigator
            class="more"
            url="/pages/classify/classify"
            open-type="reLaunch"
            >更多</navigator
          >
        </template>
      </w-title>
      <view class="body">
        <w-special-topic-item
          v-for="item in specialList"
          :key="item._id"
          :item="item" />
        <w-special-topic-item :is-more="true" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import {
  apiBannerList,
  apiNoticeList,
  apiRecommandList,
  apiClassifyList,
} from '@/api'

onShareAppMessage(e => {
  return {
    title: '手机壁纸',
  }
})
onShareTimeline(() => {
  return {
    title: '手机壁纸',
  }
})

const bannerList = ref([])
const getBannerList = async () => {
  if (bannerList.value.length) return
  bannerList.value = await apiBannerList()
}

const recommandList = ref([])
const getRecommandList = async () => {
  if (recommandList.value.length) return
  recommandList.value = await apiRecommandList()
}
const toPreview = item => {
  console.log('%c Line:110 🍎 item', 'color:#fca650', item)
  uni.setStorageSync('b-classlist', recommandList.value)
  uni.navigateTo({ url: `/pages/preview/preview?id=${item._id}&name=每日推荐` })
}

const noticeList = ref([])
const getNoticeList = async () => {
  if (noticeList.value.length) return
  noticeList.value = await apiNoticeList({ select: true })
}

const specialList = ref([])
const getSpecialList = async () => {
  if (specialList.value.length) return
  specialList.value = await apiClassifyList({ select: true })
}

getSpecialList()
getNoticeList()
getRecommandList()
getBannerList()
</script>

<style lang="scss" scoped>
.homeLayout {
  background-color: #fff;
  .banner {
    width: 750rpx;
    padding: 30rpx 0;

    swiper {
      width: 750rpx;
      height: 340rpx;
      box-sizing: border-box;

      &-item {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0 30rpx;

        .navigator {
          width: 100%;
          height: 100%;
          image.image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }
  }
  .notice {
    background-color: #f2f2f2;
    width: 690rpx;
    height: 72rpx;
    margin: 0 auto;
    border-radius: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .l {
      width: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      :deep() {
        .uni-icons {
          color: $primary-theme-color !important;
        }
      }

      .title {
        color: $primary-theme-color;
        font-size: 24rpx;
        font-weight: 600;
      }
    }

    .body {
      flex: 1;
      max-width: calc(750rpx - 60rpx - 140rpx - 70rpx);
      height: inherit;
      line-height: 72rpx;

      swiper {
        /* 高度继承父级的高度 */
        height: inherit;

        &-item {
          height: inherit;
          font-size: 30rpx;
          color: $font-color-1;
        }
      }

      .content {
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
      }
    }

    .r {
      width: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .daily-recommand {
    margin-top: 40rpx;

    .date {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $primary-theme-color;
      :deep() {
        .uni-icons {
          color: $primary-theme-color !important;
        }
      }
      &-desc {
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }

    .body {
      width: 720rpx;
      height: 430rpx;
      margin-left: 30rpx;
      margin-top: 20rpx;

      scroll-view {
        white-space: nowrap;
        :deep() {
          .uni-scroll-view-content {
            height: 430rpx;
          }
        }
        .box {
          width: 210rpx;
          height: 430rpx;
          display: inline-block;
          margin-right: 15rpx;

          image {
            width: inherit;
            height: inherit;
            border-radius: 10rpx;
          }

          &:last-child {
            margin-right: 30rpx;
          }
        }
      }
    }
  }

  .special-topic {
    padding: 40rpx 0;

    .body {
      margin-top: 20rpx;
      padding: 0 30rpx;
      display: grid;
      gap: 15rpx;
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
</style>
